<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<el-form ref="form" label-width="150px">
						<div class="taskInfo">
							<el-form-item label="一级品类：">
								<el-radio-group v-model="lev1Category">
									<el-radio
									v-for="lev1 in lev1Categorys"
									:key="lev1.id"
									:label="lev1.id" @change="changeLev1()">{{lev1.name}}
									</el-radio>
								</el-radio-group>
							</el-form-item>

							<el-form-item label="二级品类：" v-show="lev1Category!=''">
								<el-tag v-for="c in lev2Categorys" :key="c.id" :label="c.name" closable @close="handleClose(c.id)">
									{{c.name}}
								</el-tag>
								<br/>
								<i class="el-icon-plus" @click="showAdd()"></i>
							</el-form-item>
						</div>
					</el-form>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
	export default{
		name:'CategoryManage',
		methods: {
			showAdd(){
				var name=prompt("请输入类目名称","");
				if (name!=null && name!=""){
					this.addCategory(this.lev1Category,name);
				}
			},
      //添加分类
			addCategory(lev1Category,name){
				var that = this;
				this.$api.post('/category/add',{"name":name,"parentId":lev1Category},function(data){
					if(data.flag=="success"){
						that.$message({
							message: '保存成功',
							type: 'success'
						});
						that.lev2Categorys.push({
							"id":data.data.id,
							"name":data.data.name
						});
					}
				});
			},
      //通过一级查询二级
			changeLev1(){
				var that = this;
				that.lev2Categorys=[];
				this.$api.get('/category/findByParentId/'+that.lev1Category,null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.lev2Categorys.push({
								"id":data.data[i].id,
								"name":data.data[i].name
							});
						}
					} else{
						this.$message.error(data.msg);
					}
				});
			},
      //移除数组数据方法
      handleClose(tag) {
			  var that = this;
        for(var i=0;i<that.lev2Categorys.length;i++) {
          if(that.lev2Categorys[i].id == tag) {
            that.deleteCategory(that.lev2Categorys[i].id);
            that.lev2Categorys.splice(i, 1);
          }
        }
      },
      //发送请求删除数据库数据方法
      deleteCategory(id){
        var that = this;
        this.$api.post('/category/delete/'+id,null,function(data){
          if(data.flag=="success"){
            that.$message({
              message: '删除成功',
              type: 'success'
            });
          }else{
            this.$message.error(data.msg);
          }
        });
      }
		},
    //初始化一级分类
		mounted(){
			var that = this;
			this.$api.get('/category/findByParentId/0',null,function(data){
					if(data.flag=="success"){
						for(var i=0;i<data.data.length;i++){
							that.lev1Categorys.push({
								"id":data.data[i].id,
								"name":data.data[i].name
							});
						}
					}
				});
		},
		data:function(){
			return {
				navs:["基础数据管理","品类数据管理"],
				lev1Category:"",
				lev1Categorys:[],
				lev2Categorys:[]
			}
		},
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	.el-form-item i{
		font-size: 20px;
		font-weight: bold;
	}
	.el-form-item i:hover{
		cursor: pointer;
	}
</style>
